<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <title>合同编辑</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <div th:replace="~{commons/script::script}"></div>
    <style type="text/css">
        td:nth-child(1){
            text-align:right;
        }
        td:nth-child(4){
            text-align:right;
        }
        table{
            margin:auto;
        }
        input[type="text"]{
            width:72.5%;
            height:30px;
            border:0.5px solid gray;
        }
        #select{
            width:72.5%;
            height:30px;
            border:0.5px solid gray;
        }
        td:only-child{
            text-align:center;

        }
    </style>
</head>
<body>
<div id="div1">
    <form  method="post" id="form">
        <table>
            <tr>
                <td>合同编号：</td>
                <td>
                    <input type="hidden" name="id" th:value="${contract.getId()}">
                    <input type="text" name="number" th:value="${contract.getNumber()}" id="contractNumber" >
                </td>
                <td></td>
                <td>签约时间：</td>
                <td>
                    <input class="easyui-datetimebox" name="dueTime" th:value="${contract.getDueTime()}">
                </td>
            </tr>
            <tr>
                <td>来源商机：(单击选择)</td>
                <td>
                    <select id="select" name="businessId" th:value="${contract.getBusinessId()}" >
                        <option value="-1">请选择商机</option>
                    </select>
                </td>
                <td><a href="/business/toAddBusiness" style="color:blue;">新建商机</a></td>
                <td>联系人：</td>
                <td>
                    <input type="text" name="businessId" th:value="${contract.getBusinessId()}" id="connectionName" >
                </td>
            </tr>
            <tr>
                <td>来源客户：</td>
                <td><input type="text" name="businessId" id="businessCustomerName" th:value="${contract.getBusinessId()}"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>负责人：<input type="hidden" name="ownerUserName" id="ownerUserId"></td>
                <td><input type="text" th:value="${contract.getBusinessId()}" id="ownerUser"></td>
                <td></td>
                <td>合同金额：</td>
                <td>
                    <input name="price" th:value="${contract.getPrice()}" type="text">
                </td>
            </tr>
            <tr>
                <td class="text-title">合同生效日期：</td>
                <td class="text-content">
                    <input name="startDay" th:value="${contract.getStartDay()}" class="easyui-datetimebox">
                </td>
                <td></td>
                <td>合同到期时间：</td>
                <td>
                    <input name="endDay" th:value="${contract.getEndDay()}"  class="easyui-datetimebox">
                </td>
            </tr>
            <tr>
                <td>状态：</td>
                <td><input type="text" name="status" th:value="${contract.getStatus()}"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>条件和条款：</td>
                <td colspan="4"><textarea rows="8" cols="100%" name="content" id="wysiwyg" th:text="${contract.getContent()}"></textarea></td>
            </tr>
            <tr>
                <td>合同描述：</td>
                <td colspan="4"><textarea rows="4" cols="100%" name="description" th:text="${contract.getDescription()}"></textarea></td>
            </tr>
            <tr>
                <td colspan="5">
                    <a href="javascript:void(0);" id="saveBtn" class="easyui-linkbutton button-primary">保存</a>
                    <a href="javascript:void(0);" id="resetBtn" class="easyui-linkbutton button-return">重置</a>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script type="text/javascript">
    $(function() {
        document.getElementById("businessCustomerName").style.backgroundColor = "#FFF8DC";
        document.getElementById("ownerUser").style.backgroundColor = "#FFF8DC";
        document.getElementById("connectionName").style.backgroundColor = "#FFF8DC";
        document.getElementById("contractNumber").style.backgroundColor = "#FFF8DC";
        var alerNumber=document.getElementById('contractNumber').value;
        if(!alerNumber){
            document.getElementById('contractNumber').value=new Date().getTime();
        }
        //导入编辑器
        KindEditor.ready(function(K) {
            //在编辑器初始化成功之后赋值editor变量
            window.editor = K.create("#wysiwyg",{
                minWidth : '300px',
                items:[
                    'source', '|', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'quickformat', 'selectall', '|',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor',  'bold',
                    'underline', '|', 'image', 'multiimage',
                    'flash', 'media','hr', 'emoticons', 'baidumap', 'pagebreak',
                    'link'
                ]
            });
        });


        document.getElementById("select").onchange=function (){
            $.post(
                "/contract/add",
                function(data){
                    var selectValue=$("#select").val();
                    if(data){
                        $.each(data.data,function(index,obj){
                            if(selectValue==obj.id){
                                document.getElementById('connectionName').value=obj.contactsId;
                                document.getElementById('businessCustomerName').value=obj.customerId;
                                document.getElementById('ownerUser').value=obj.ownerUserId;
                                document.getElementById('ownerUserId').value=obj.ownerUserId;
                                document.getElementById('contractNumber').readOnly=true;
                                document.getElementById('connectionName').readOnly=true;
                                document.getElementById('ownerUser').readOnly=true;
                                document.getElementById('businessCustomerName').readOnly=true;
                                document.getElementById("ownerUser").style.backgroundColor = "#D3D3D3";
                                document.getElementById("connectionName").style.backgroundColor = "#D3D3D3";
                                document.getElementById("businessCustomerName").style.backgroundColor = "#D3D3D3";

                            }

                        })
                    }
                },"json"
            );

        };

        $.post(
            "/contract/add",
            function(data){
                if(data){
                    var businessId = [[${contract.businessId}]];
                    $.each(data.data,function(index,obj){
                        var option = $("<option"+" "+ "value="+obj.id+">"+obj.name+"</option>");
                        if(businessId && businessId == obj.id){
                            option.attr("selected",true);
                        }
                        $("#select").append(option);
                    })
                }
            },"json"
        );


        //重置按钮
        $("#resetBtn").on("click",function(event){
            $("#form").form("reset");
        });
        //保存按钮
        $("#saveBtn").on("click", function(event) {
            editor.sync();
            $("#form").form("submit", {
                url : "/contract/edit",
                onSubmit : function() {
                    //对表单进行数据校验,如果未通过校验，返回false，阻止表单提交
                    return $(this).form("validate");

                },
                success : function(data) {
                    var obj = eval("("+data+")");
                    if(obj.success){
                        $.messager.alert("提示",obj.message);
                        parent.closeTopWindow();
                    }else{
                        $.messager.alert("警告",obj.message);
                    }
                }
            });
        });

    });
</script>
</body>
</html>